<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>添加回复语模板</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		body{
			background: #f0f2f5;
			min-width: 1020px;
		}
		/*公共部分 start*/
		.public_header_container{
			height: 48px;
			background: #fff;
			display: -webkit-box;
			display: flex;
			-webkit-box-align: center;
			align-items: center;
			padding-left: 15px;
			border-bottom: 1px solid #e8e8e8;
		}
		.public_header_container p{
			font-size: 16px;
			font-weight: 500;
			color: rgba(0,0,0,.85);
			line-height: 28px;
		}
		.public_main_container{
			padding: 16px;
		}
		.public_main_content{
			background: #fff;
			padding: 24px;
		}
		.customerInfo_firstTitle{
			font-weight: 700;
			font-size: 15px;
			margin-right: 12px;
		}
		.line{
			width: 100%;
			height: 1px;
			background: #ececec;
			margin-top: 20px;
			margin-bottom: 20px;
		}
		.public_RightShowcased_container{
			height: 38px;
			line-height: 38px;
			border-width: 1px;
			border-style: solid;
			border-color: #e6e6e6;
			background-color: #fff;
			border-radius: 2px;
			box-sizing: border-box;
			padding-left: 10px;
			overflow: hidden;		
		}
		.public_RightShowcased_container li{
			height: 36px;
			line-height: 36px;
			float: left;
		}
		/*标签部分*/
		.customerLabel_mainList_content{
			flex: 1;
			padding-right: 245px;
			display: flex;
			-webkit-box-align: center;
			align-items: center;
			flex-wrap: wrap;
			padding-top: 5px;
		}
		.customerLabel_mainList_content li{

			height: 28px;
			display: -webkit-box;
			display: flex;
			-webkit-box-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			align-items: center;
			padding-left: 14px;
			padding-right: 14px;
			border: 1px solid #e9e9e9;
			color: rgba(0,0,0,.65);
			font-size: 14px;
			background: #f7f7f7;
			/*border-radius: 4px;*/
			margin-right: 10px;
			margin-bottom: 10px;
			position: relative;
		}
		.add_active{
			background: #fff !important;
			box-shadow: 0 2px 0 rgba(0,0,0,.015) !important;
			cursor: pointer;
		}
		.add_active:hover{
			border-color: #40a9ff;
			color: #40a9ff;
			transition: all .3s
		}
		.inputLable{
			height: 28px;
			margin-bottom: 10px;
			outline: none;
			background: #fff;
			border: 1px solid #ececec;
			/*border-radius: 5px;*/
			padding: 0 10px;
			width: 111px;
			margin-right: 10px;
		}
		.inputLable:focus{
			border-color: #40a9ff;
		}
		.deleteLabel{
			position: absolute;
			width: 10px;
			height: 10px;
			right: -5px;
			top: -4px;
			background: #a2a2a2;
			border-radius: 50%;
			padding: 2px;
			cursor: pointer;
		}
		/*选择框 start*/
		.SetManually_select_container{
			padding-left: 39px;
		}
		.SetManually_select_content{
			display: flex;
			align-items: center;
			color: #000;
			font-size: 14px;
			margin-bottom: 15px;
		}
		.SetManually_selectInput_content{
			height: 28px;
			outline: none;
			background: #fff;
			border: 1px solid #ececec;
			padding: 0 10px;
			width: 40px;
			margin-right: 10px;
			margin-left: 10px;
		}
		/*选择框 end*/
	</style>
</head>
<body>
	<!-- 新版公共头部 -->
	<div class="public_header_container">
		<p>转人工设置</p>
	</div>
	<!-- 新公共内容区域 -->
	<form class="layui-form" action="" id="addAutomatictag">
		<div class="public_main_container">
			<div class="public_main_content">
				<h3 class="customerInfo_firstTitle">设置关键词：客服对话中触发关键词进入人工模式</h3>
				<div class="line"></div>

				<div class="layui-form-item">
					<label class="layui-form-label">精准匹配</label>
					<div class="layui-input-block">
						<input type="hidden" name="preciseMatch" id="preciseMatch" value="{implode(',',$artificial->words)}">
						<ul class="customerLabel_mainList_content preciseMatch">
							<li class="add_active">+ 添加</li>
							<input class="inputLable" type="text" name="" placeholder="输入后回车" style="display: none;">
							<!-- 循环 -->
							{loop $artificial->words as $words}
							<li>
								<span>{$words}</span>
								<svg class="deleteLabel" t="1614329734901" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2344" width="30" height="30"><path d="M604.672 523.776l364.544-364.544c25.088-25.088 25.088-66.048 0-90.624l-2.048-2.048c-12.288-12.288-28.16-18.944-45.568-18.944s-33.28 6.656-45.568 18.944L512 431.616 147.456 66.56c-12.288-12.288-28.16-18.944-45.568-18.944-17.408 0-33.28 6.656-45.568 18.944l-2.048 2.048c-12.288 12.288-19.456 28.16-19.456 45.568s6.656 33.28 18.944 45.568l364.544 364.544L53.76 888.832c-25.088 25.088-25.088 66.048 0 90.624l2.048 2.048c12.288 12.288 28.16 18.944 45.568 18.944 17.408 0 33.28-6.656 45.568-18.944L511.488 616.96l364.544 364.544c12.288 12.288 28.16 18.944 45.568 18.944s33.28-6.656 45.568-18.944l2.048-2.048c12.288-12.288 18.944-28.16 18.944-45.568 0-17.408-6.656-33.28-18.944-45.568L604.672 523.776z" p-id="2345" fill="#fff"></path></svg>
							</li>
							{/loop}
						</ul>
					</div>
				</div>
				<h3 class="customerInfo_firstTitle">转人工规则</h3>
				<div class="line"></div>
				<!--选择框 -->
				<div class="SetManually_select_container">
					<div class="SetManually_select_content">
						<input type="checkbox" name="round" lay-skin="primary" value="1" {if $artificial->round == 1} checked="" {/if}>
						<span>对话轮次达到</span>
						<input class="SetManually_selectInput_content" type="text" id="round" placeholder=""  value="{$artificial->round_size}">
						<span>次进入人工</span>
					</div>
					<div class="SetManually_select_content">
						<input type="checkbox" name="recognition" lay-skin="primary" value="1" {if $artificial->recognition == 1} checked="" {/if}>
						<span>连续</span>
						<input class="SetManually_selectInput_content" type="text" id="recognition" placeholder="" value="{$artificial->recognition_size}">
						<span>次没有识别用户问题进入人工</span>
					</div>
				</div>
				
				<div class="line"></div>
				<div class="layui-form-item">
				    <div class="layui-input-block" style="margin-left:40px;">
				      <button type="button" class="layui-btn" type="button" onclick="sub()">立即提交</button>
				    </div>
				  </div> 
			</div>
		</div>
	</form>
<script src="/cdn/jquery.js"></script>
<script src="/layui/layui.js"></script>
<script src="/layui/layui.all.js"></script>
<script src="/js/ajax.js"></script>
<script type="text/javascript">
	function sub(){
		var round = $('input[name="round"]:checked').val();
		var recognition = $('input[name="recognition"]:checked').val();
		var round_text = $('#round').val();
		var recognition_text = $('#recognition').val();
		if(round && !round_text){
			tusi("必填項不能为空");
			return false;
		}
		if(recognition && !recognition_text){
			tusi("必填項不能为空");
			return false;
		}
		var preciseMatch = $("#preciseMatch").val();
		myAjaxPost(false, true, '',{ words:preciseMatch,recognition,recognition,recognition_text:recognition_text,round:round,round_text:round_text}, function (resp) {
			tusi(resp.msg);
		})
	}
</script>
<script type="text/javascript">
	let $div = '<input class="inputLable" type="text" name="" placeholder="输入后回车">';
	$('.add_active').click(function(){
		$(this).next().show();
		$(this).next().focus();
	})
	$(".inputLable").on("keypress",function(event){
		if(event.keyCode == 13){
			// alert('内容是：' + $(this).val());
			let val = $(this).val();
		    $('.inputLable').val('');
		    $('.inputLable').hide();
		    $(this).after("<li><span>"+ val +"</span><svg class='deleteLabel't='1614329734901'class='icon'viewBox='0 0 1024 1024'version='1.1'xmlns='http://www.w3.org/2000/svg'p-id='2344'width='30'height='30'><path d='M604.672 523.776l364.544-364.544c25.088-25.088 25.088-66.048 0-90.624l-2.048-2.048c-12.288-12.288-28.16-18.944-45.568-18.944s-33.28 6.656-45.568 18.944L512 431.616 147.456 66.56c-12.288-12.288-28.16-18.944-45.568-18.944-17.408 0-33.28 6.656-45.568 18.944l-2.048 2.048c-12.288 12.288-19.456 28.16-19.456 45.568s6.656 33.28 18.944 45.568l364.544 364.544L53.76 888.832c-25.088 25.088-25.088 66.048 0 90.624l2.048 2.048c12.288 12.288 28.16 18.944 45.568 18.944 17.408 0 33.28-6.656 45.568-18.944L511.488 616.96l364.544 364.544c12.288 12.288 28.16 18.944 45.568 18.944s33.28-6.656 45.568-18.944l2.048-2.048c12.288-12.288 18.944-28.16 18.944-45.568 0-17.408-6.656-33.28-18.944-45.568L604.672 523.776z'p-id='2345'fill='#fff'></path></svg></li>");
		    let matchType = $(this).parent().prev().attr('id');
		    reset_match_val(matchType);
		}  
	});
	$(".inputLable").blur(function(){
	  $('.inputLable').hide();
	  $('.inputLable').val('');
	});
	$('body').on('click','.deleteLabel',function(){
		let	matchType = $(this).parent().parent().prev().attr('id');
		$(this).parent().remove();
		reset_match_val(matchType);
	})

	function reset_match_val(matchType){
		var matchWords = $("."+matchType+" li span");
		let words = [];
		for (var i = 0, l = matchWords.length; i < l; i++) {
	        words.push($(matchWords[i]).text());
	    }
		$("#"+matchType).val(words);
	}
</script>
</body>
</html>